const observeFP = new PerformanceObserver((list) => {
    for(const item of list.getEntries()) {
        if(item.name === 'first-paint') {
            observeFP.disconnect()//fp 只需要监听一次，监听到之后停止观察
            const json = item.toJSON()
            const reportData = {
                ...json,
                type: 'performance',
                subType: item.name,
                pageUrl: window.location.href
            }

        //     发送监控数据
            console.log(reportData)
        }
    }
})

// buffered 设为true 表示计算所有的fp 与 fcp， 如果不设置，表示调用api之后的fp和fcp
observeFP.observe({ type: 'paint' ,buffered: true })

// 注意点，FCP和FP，的时机，FCP一定是包含FP的
// FCP表示有意义的内容
// 当页面上有文字，图片，有内容的canvas 或者 svg 出现时，都会计算FCP
// 计算FCP时，也会包含FP，假如页面上只渲染一段文字，那么FCP 和 FP 都是这段文字渲染出来的时间

// 而FP 指的是首次渲染的无意义内容，比如说背景色，边框，注意FP 不含盖FCP
// 比如说页面上只有一个背景色为红色的div，那么只会计算FP的时间，FCP直接不计算了
